<!-- eslint-disable -->
<template>
  <el-form :model="props.formItem" label-width="100" class="p-2 ">
    <el-form-item label="checkbox类型" label-width="120">
      <el-radio-group v-model="props.formItem.checkedType" class="ml-4">
        <el-radio label="default">默认</el-radio>
        <el-radio label="button">按钮</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="标签名称">
      <el-input v-model.trim="props.formItem.label" />
    </el-form-item>
    <el-form-item label="表单字段" required prop="field" >
      <el-input v-model.trim="props.formItem.field" />
    </el-form-item>
    <el-form-item label="栅格宽度">
      <el-input v-model.number="props.formItem.col" placeholder="默认24" />
    </el-form-item>
    <el-form-item label="选项来源">
      <div v-for="(item,index) in props.formItem.options" :key="index" class="flex gap-1 mb-1 group-last:mb-0">
        <el-input v-model="item.label" placeholder="请输入选项名称." class="w-1/2" />
        <el-input v-model="item.value" placeholder="请输入选项值." class="w-1/3" />
        <el-link type="danger" :underline="false" v-if="props.formItem.options" @click="props.formItem.options.splice(index,1)">删除</el-link>
      </div>
      <el-link type="primary" :underline="false" v-if="props.formItem.options" @click="props.formItem.options.push({label:'',value:''})">添加</el-link>
    </el-form-item>
    <FormRulesConfig :form-item="props.formItem" />
    <el-form-item label="是否有border" v-if="props.formItem.checkedType === 'default'">
      <el-switch v-model="props.formItem.checkedBorder" />
    </el-form-item>
    <el-form-item label="是否禁用">
      <el-switch v-model="props.formItem.disabled" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts" name="Checkbox">
import FormRulesConfig from './FormRulesConfig.vue'
const props = defineProps<{ formItem: SubmitFormSchema }>()
</script>
